<template>
	<cl-select
		ref="select-load-more"
		v-bind="$attrs"
		:placeholder="placeholder"
		v-model="id"
		filterable
		remote
		:clearable="clearable"
		v-loadmore="loadmoreData"
		:remote-method="remoteMethod"
		:loading="loading"
		@change="change"
		@visible-change="$emit('visible-change')"
		@clear="$emit('clear')"
		@blur="onBlur"
		@focus="$emit('focus')"
		:multiple="multiple"
	>
		<slot :data="list" />
	</cl-select>
</template>
<script>
export default {
	name: "cl-select-load-more",
	props: {
		value: {
			type: [String, Number, Array]
		},
		// 提示语
		placeholder: {
			type: String,
			default: "请选择"
		},
		// 请求接口的函数
		apiFn: {
			type: Function,
			default: () => {}
		},
		// 搜索关键字的字段
		keyword: {
			type: String,
			default: "keyword"
		},
		// 条数
		page_size: {
			type: Number,
			default: 20
		},
		initRequest: {
			type: Boolean,
			default: false
		},
		clearable: {
			type: Boolean,
			default: true
		},
		reduceS:{
			type: Boolean,
			default: false
		},
		multiple:{
			type: Boolean,
			default: false
		},
	},
	directives: {
		loadmore: {
			bind(el, binding) {
				const SELECTWRAP_DOM = el.querySelector(
					`.el-select-dropdown .el-select-dropdown__wrap`
				);
				if (!SELECTWRAP_DOM) {
					return;
				}
				SELECTWRAP_DOM.addEventListener("scroll", function() {
					const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
					if (condition) {
						binding.value();
					}
				});
			}
		}
	},
	data() {
		return {
			list: [],
			allList: [],
			id: this.value,
			searchKey: "",
			loading: false,
			pagination: {
				page: 1,
				total: 0
			}
		};
	},
	watch: {
		value(v) {
			// console.log("log", v);
			this.id = v;
		}
	},
	created() {
		if (this.initRequest) {
			this.init();
		}
	},
	methods: {
		init() {
			this.pagination.page = 1;
			this.getList("init");
		},
		reset() {
			this.pagination = {
				page: 1,
				total: 0
			};
			this.list = [];
		},
		async getList(type) {
			const params = {
				...this.query,
				[this.keyword]: this.searchKey,
				page: this.pagination.page,
				page_size: this.page_size
			};
			const { data, total } = await this.apiFn(params);
           
			type == "search" && (this.loading = false);

			if (this.pagination.page == 1) {
				this.list = data;
			} else {
			    let	test = [...this.list, ...data];
				//去重
				if(this.reduceS){
					let obj = {}
					this.list =  test.reduce(function (datas, item) {
						obj[item.id] ? '' : obj[item.id] = true && datas.push(item)
						return datas;
					}, [])
				}else{
                    this.list =  test
				}
			}
			this.pagination.total = total;
			console.log(this.pagination)
			this.$emit("change-list", this.list);
			
			return data;
		},
		async remoteMethod(val) {
			console.log('3333333333',val)
			this.searchKey = val;
			// if(!this.searchKey){
			// 	return
			// }
			this.$emit("keyword", val);
			
			this.loading = true;
			this.pagination.page = 1;
			this.getList("search");
		},
		loadmoreData() {
			this.pagination.page++;
			    console.log('11111111111')
			if (this.list.length < this.pagination.total) {
				console.log('222222222')
				this.getList();
			}
		},
		change(v) {
			console.log('22222222',v)
			this.$emit("input", v);
			this.$emit("change", v);
			// this.$emit("keyword", v);
		},
		onBlur() {
			console.log("onBlur----");
			this.$emit("blur");
		}
	}
};
</script>

<style lang="scss" scoped></style>
